<template>
  <div class="slider-commont bgWhite slider-card">
    <CardTitle>
      <template slot="title">留言</template>
    </CardTitle>
    <div class="slider-box">
      <div class="slider-commont_item" v-for="(item,index) in list" :key="index">
        <div class="slider-commont_item-name">
          #{{item.username}}
          <span>{{getDate(item.createdAt)}}</span>
        </div>
        <div class="slider-commont_item-content">
          {{item.commontc}}
          <div class="slider-commont_item-subs">
            <div class="slider-commont_item" v-for="(item1,index1) in item.commonts" :key="index1">
              <div class="slider-commont_item-name">
                 <span>#{{item1.username}}</span>
                {{item1.commontc}}
              </div>
            </div>
          </div>
        </div>
      </div>
      <a-skeleton :loading="loading" active :paragraph="{ rows: 1 }"></a-skeleton>
    </div>

  </div>
</template>
<script lang="ts">
import config from "../utils/config";
import { formatDate } from "../utils/util.js";
import { Component, Prop, Vue, Emit } from "vue-property-decorator";
@Component
export default class HelloWorld extends Vue {
  list: Array<any> = [];
  loading: boolean = true;
  created() {
    this.loadList();
  }
  async loadList() {
    const res = await this.$axios.$get(config.BASE_URL + "/api/commont/news");
    this.loading = false;
    this.list = res.d.rows;
  }
  getDate(str: string) {
    return formatDate(str);
  }
}

//
</script>
<style lang="scss" scoped>
.slider-commont {
  &_item {
    padding: 5px;
    border-bottom: 1px solid rgba(192, 238, 243, 0.42);
    &:last-child {
      border-bottom: none;
    }
    &-name {
      display: block;
      font-size: 14px;
      span {
        font-size: 12px;
      }
    }
    &-subs {
      padding-left: 10px;
    }
    &-content {
      font-size: 14px;
      background-color: rgba(187, 186, 197, 0.1);
      padding: 5px;
      border-radius: 2px;
    }
  }
}
</style>
